<template>
  <div class="statistcs_container">
    <h2 class="homeTitle">订单统计</h2>
    <div class="charBox">
      <div class="orderProportion">
        <div>
          <p>订单完成率</p>
          <p style="margin-top: 5px;text-align: center;">{{ (orderdata.orderCompletionRate * 100).toFixed(1) }}%</p>
        </div>
        <div class="symbol">=</div>
        <div>
          <p>有效订单</p>
          <p style="margin-top: 5px;text-align: center;">{{ orderdata.validOrderCount }}</p>
        </div>
        <div class="symbol">/</div>
        <div>
          <p>订单总数</p>
          <p style="margin-top: 5px;text-align: center;">{{ orderdata.totalOrderCount }}</p>
        </div>
      </div>
      <div id="ordermain" style="width: 100%; height: 300px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, nextTick } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  orderdata: {
    type: Object,
    default: {}
  },
  overviewData: {
    type: Object,
    default: {}
  }
})

watch(() => props.orderdata, () => {
  nextTick(() => {
    initChart()
  })
})

const initChart = () => {
  const chartDom = document.getElementById('ordermain') as any
  const myChart = echarts.init(chartDom)
  var option: any
  option = {
    legend: {
      itemHeight: 3, //图例高
      itemWidth: 12, //图例宽
      icon: 'rect', //图例
      show: true,
      top: 'bottom',
      data: ['订单完成率', '有效订单', '订单总数'],
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff', //背景颜色（此时为默认色）
      borderRadius: 2, //边框圆角
      textStyle: {
        color: '#333', //字体颜色
        fontSize: 12, //字体大小
        fontWeight: 300,
      },
    },
    grid: {
      top: '5%',
      left: '20',
      right: '50',
      bottom: '12%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        //X轴字体颜色
        textStyle: {
          color: '#666',
          fontSize: '12px',
        },
      },
      axisLine: {
        //X轴线颜色
        lineStyle: {
          color: '#E5E4E4',
          width: 1, //x轴线的宽度
        },
      },
      data: props.orderdata.data.dateList, //后端传来的动态数据
    },
    yAxis: [
      {
        type: 'value',
        min: 0,
        //max: 500,
        interval: 50,
        axisLabel: {
          textStyle: {
            color: '#666',
            fontSize: '12px',
          },
          // formatter: "{value} ml",//单位
        },
      }, //左侧值
    ],
    series: [
      {
        name: '订单总数',
        type: 'line',
        // stack: 'Total',
        smooth: false, //否平滑曲线
        showSymbol: false, //未显示鼠标上移的圆点
        symbolSize: 10,
        // symbol:"circle", //设置折线点定位实心点
        itemStyle: {
          normal: {
            color: '#FFD000',
            lineStyle: {
              color: '#FFD000',
            },
          },
          emphasis: {
            color: '#fff',
            borderWidth: 5,
            borderColor: '#FFC100',
          },
        },

        data: props.orderdata.data.orderCountList,
      },
      {
        name: '有效订单',
        type: 'line',
        // stack: 'Total',
        smooth: false, //否平滑曲线
        showSymbol: false, //未显示鼠标上移的圆点
        symbolSize: 10, //圆点大小
        // symbol:"circle", //设置折线点定位实心点
        itemStyle: {
          normal: {
            color: '#FD7F7F',
            lineStyle: {
              color: '#FD7F7F',
            },
          },
          emphasis: {
            // 圆点颜色
            color: '#fff',
            borderWidth: 5,
            borderColor: '#FD7F7F',
          },
        },

        data: props.orderdata.data.validOrderCountList,
      }
    ],
  }
  option && myChart.setOption(option)
}
</script>
<style lang="scss" scoped>
@import url("../css/statistics.scss");

.orderProportion {
  display: flex;
  margin: 10px 0;

  .symbol {
    margin: 0 10px;
  }
}
</style>
